<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .test-div{
            position: relative;  /*日常相对定位*/
            width:150px;
            height:36px;
            border-radius:5px;
            border:black 1px solid;
            background: rgba(245,245,245,1)
        }
        .test-div:before,.test-div:after{
            content: "";  /*:before和:after必带技能，重要性为满5颗星*/
            display: block;
            position: absolute;  /*日常绝对定位*/
            top:8px;
            width: 0;
            height: 0;
            border:6px solid transparent;
        }
        .test-div:before{
            left:-11px;
            border-right-color: rgba(245,245,245,1);
            z-index:1
        }
        .test-div:after{
            left:-12px;
            border-right-color: rgba(0,0,0,1);
            z-index: 0
        }
    </style>
    <style>
        body{
            background: url(../img/login_index.png) no-repeat left top /*这里本兽加了个图片背景，用以区分背景的半透明及内容的完全不透明*/
        }
        .test1-div{
            position: relative;  /*日常相对定位(重要，下面内容也会介绍)*/
            width:300px;
            height: 120px;
            padding: 20px 10px;
            font-weight: bold;
        }
        .test1-div:before{
            position: absolute;  /*日常绝对定位(重要，下面内容也会略带介绍)*/
            content: "";  /*:before和:after必带技能，重要性为满5颗星*/
            top:0;
            left: 0;
            width: 100%;  /*和内容一样的宽度*/
            height: 100%;  /*和内容一样的高度*/
            background: rgba(255,255,255,.5); /*给定背景白色，透明度50%*/
            z-index:-1 /*日常元素堆叠顺序(重要，下面内容也会略带介绍)*/
        }
    </style>
</head>
<body>

<div class="test-div"></div>

<!--这里容兽偷个懒，布局简单写写-->
<div class="test1-div">
    <table>
        <tr>
            <td>Name</td>
            <td><input placeholder="your name" /></td>
        </tr>
        <tr>
            <td>Password</td>
            <td><input placeholder="your password" /></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="button" value="login" /></td>
        </tr>
    </table>
</div>
</body>
</html>